<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        position: relative;
    }
    #sendly{
        width: 100px;
        height: 100px;
        border-radius: 100%;
    }
    tr,th,td{
        width: 300px;
        height: 40px;
        text-align: center;
    }
    .sendly {
        padding-top: 30px;
        text-align: center;
        width: 500px;
        height: 200px;
        border: 1px solid rgb(17, 14, 14);
        position: absolute;
        top: 50px;
        left: 500px;
        background: wheat;
        display: none;
    }
    #send,#off{
        width: 100px;
        height: 40px;
    }
</style>

<body>
    <button id="sendly">发布留言</button>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>标题</th>
                <th>留言人</th>
                <th>内容</th>
                <th>时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <div class="sendly">
        标&emsp;题：<input type="text" id="tit" style="width: 400px;height: 40px;" /><br />
        内&emsp;容：<input type="text" id="con" style="width: 400px;height: 40px;" /> <br />
        留言人：<input type="text" id="username" style="width: 400px;height: 40px;" /> <br />

        <button id="send">发布</button>
        <button id="off">关闭</button>
    </div>
</body>
<script>
    window.onload = function () {
        getData() //获取留言列表
        sendly.onclick = function () {
            document.getElementsByClassName('sendly')[0].style.display = 'block'
        }
        off.onclick = function () {
            document.getElementsByClassName('sendly')[0].style.display = 'none'
        }
        send.onclick = function () {
            var title = document.getElementById('tit').value,
                con = document.getElementById('con').value,
                username = document.getElementById('username').value
            if (!title || !con || !username) {
                alert('输入内容不正确')
                return
            }
            var data = {
                title: title,
                content: con,
                name: username,
            }
            xmlHttp('POST', 'https://liu.zzgoodqc.cn/lyb/add', data, function (res) {
                console.log(res)
                if (res.code == 200 && res.msg == 'success') {
                    getData()
                    setTimeout(() => {
                        document.getElementsByClassName('sendly')[0].style.display = 'none'
                    }, 2000)
                }
            }
            )
        }
    }
    function del(id) {
        xmlHttp('GET', 'https://liu.zzgoodqc.cn/del/' + id, '', function (res) {
            if (res.code == '200') {
                getData()
            } else {
                alert('删除失败' + res.msg)
            }
        })
    }
    //获取留言列表
    function getData() {
        var data = xmlHttp(
            'GET',
            'https://liu.zzgoodqc.cn/lyb',
            '',
            function (res) {
                console.log(res)
                if (res.code == 200) {
                    var strHtml = ''
                    for (i = res.data.length - 1; i >= 0; i--) {
                        strHtml += `<tr>
                        <td>${res.data[i].id}</td>
                        <td>${res.data[i].title}</td>
                        <td>${res.data[i].name}</td>
                        <td>${res.data[i].content}</td>
                        <td>${res.data[i].created_at}</td>
                        <td><button onclick=del(${res.data[i].id})>删除</button></td>
                     </tr>`
                    }
                    document.getElementsByTagName('tbody')[0].innerHTML = strHtml
                } else {
                    alert('获取留言列表失败')
                }
            }
        )
    }
    //封装请求
    function xmlHttp(method, url, data = '', fn) {
        var xmlHttp = new XMLHttpRequest()
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                fn(JSON.parse(xmlHttp.responseText))
            }
        }
        xmlHttp.open(method, url)
        if (method == 'POST') {
            xmlHttp.setRequestHeader(
                'content-type',
                'application/x-www-form-urlencoded'
            )
            var keys = Object.keys(data),
                vals = Object.values(data)
            var strData = ''
            for (let i in keys) {
                strData += keys[i] + '=' + vals[i] + '&'
            }
            xmlHttp.send(strData)
        } else {
            xmlHttp.send()
        }
    }
</script>

</html>